<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 设置css样式 -->
	<style>
		/* 标签选择器 */
		table{
			/* 边框合并 */
			border-collapse: collapse;
		}
	</style>
</head>
<body>
	<!-- table标签就是一个表格 -->
	<!-- 一个tr代表一行 一个td代表一个单元格或者是一列 -->
	<!-- border属性设置边框
		background设置表格背景图片 background="../Day01/音视频/2.jpg"
		bgcolor设置背景色
		align设置表格水平对齐方式  left(默认) center right
		cellspacing 代表单元格和单元格之间得距离
		cellpadding 代表单元格和文字之间得距离
	-->
	<table  cellspacing="0" cellpadding="10" align="center" width="400px" height="250px" border="1">
		<!-- align属性可以给table tr td th设置 水平对齐方式  -->
		<!-- valign属性设置垂直对齐方式 可以给tr th td    top mid(默认) bottom-->
		<!-- <tr align="center">
			<td>姓名</td>
			<td align="right">年龄</td>
			<td>性别</td>
		</tr> -->
		<tr valign="bottom"> 
			<!-- th表头标签 默认有居中加粗效果-->
			<th valign="top">姓名</th>
			<th align="right">年龄</th>
			<th>性别</th>
		</tr>
		<tr>
			<td valign="bottom">张三</td>
			<td>18</td>
			<td>男</td>
		</tr>
	</table>

	<!-- 一个完整得表格结构 -->
	<table border="1" width="250px">
		<!-- caption表格标题标签 -->
		<caption align="right">个人信息展示</caption>
		<!-- 表头 -->
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<!-- 表体 -->
		<tbody>
			<!-- 如果table标签只写了tr浏览器会自动补全tbody标签 -->
			<tr>
				<td>李四</td>
				<td>18</td>
				<td>女</td>
			</tr>
		</tbody>
		<!-- 表脚 一般不写-->
		<tfoot></tfoot>
	</table>
</body>
</html>